import React from 'react';
import styles from './index.less';
import { CloseOutlined } from '#/utils/antdIcons';
import { Table, Tooltip } from 'antd';
import { tableLocale } from '@/tool/components/PageEmpty';
import moment from 'moment';
import PropTypes from 'prop-types';
import plan_icon from '@/assets/img/plan_icon.png';

const SecurityModal = (props) => {
  const { tAppSafetyAccidentList } = props.securityModalList;
  let ARRAYLIST = [
    { title: '时间', dataIndex: 'createTime', key: 'createTime', width: 100 },
    { title: '场站', dataIndex: 'place', key: 'place', width: 150 },
    { title: '事件', dataIndex: 'accidentDescription', key: 'accidentDescription', width: 350 },
    { title: '达到事故等级', dataIndex: 'accidentGrade', key: 'accidentGrade', width: 200 },
  ];

  const getColumns = () => {
    const isDate = (str) => {
      // 替换日期分隔符  - => .
      if (str && str.indexOf('-') > -1) {
        const reg = /^\d{4}-\d+-\d+/g;
        return reg.test(str);
      }
      return false;
    };

    const render_Tooltip = (text) => (
      <Tooltip overlayClassName="overtoop" placement="topLeft" title={text}>
        <div className={styles.tooltipBox}>
          {isDate(text) ? (
            <span>{moment(text).format('YYYY.MM.DD') || '-'}</span>
          ) : (
            <span>{text || '-'}</span>
          )}
        </div>
      </Tooltip>
    );

    const array = ARRAYLIST.map((item) => {
      return {
        ...item,
        render: (text) => render_Tooltip(text),
      };
    });
    return array;
  };

  return (
    <div className={styles.SecurityModal}>
      <div className={styles.SecurityModalTitle}>
        <p className={styles.texts}>
          <span>
            <img src={plan_icon} alt="" />
          </span>
          <span>{props.title}</span>
        </p>
        <div
          className={styles.clone}
          onClick={() => {
            props.handleCancel();
          }}
        >
          <CloseOutlined className="clones" />
        </div>
      </div>
      <div className={styles.tables}>
        <Table
          dataSource={tAppSafetyAccidentList}
          locale={tableLocale}
          columns={getColumns()}
          pagination={false}
          style={{ width: '100%' }}
          scroll={false}
        />
      </div>
    </div>
  );
};

SecurityModal.propTypes = {
  title: PropTypes.string,
  handleCancel: PropTypes.func,
  securityModalList: PropTypes.any,
};

export default SecurityModal;
